<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>经典布局练习</title>
    <style type="text/css">
        *{
            margin:0px;
            padding:0px;
        }
        .bigdiv{
            width:544px;
            margin:0 auto;
            height:800px;
            /*background-color: magenta;*/
            border:1px solid blue;
        }
        .black{
            font-weight:bold;
            margin-left:8px;
        }
        .left{
            margin-left:394px;
        }
        .bigdiv ul{
            display:block;
        }
        .bigdiv li{
            list-style-type: none;
            float:left;
            width:120px;
            height:160px;
            margin:8px;
        }
        .bigdiv img{
            width:120px;
            height:50px;
        }
        .bigdiv a:link{
            text-decoration: none;
        }
    </style>
</head>
<body>
<!--
padding 可以填充盒子  填充可以使盒子变大
-->
<div class="bigdiv">
    <span class="black">优酷牛人</span>
    <span class="left"><a href="#">更多牛人</a></span>
    <ul>
        <li>
            <img src="../qiu.jpg" alt="">
            <p><a href="#">精选标题精选标题精选标题</a></p>
            <p>用户：xxxxx</p>
            <p>用户：xxxxx</p>
            <p>用户：xxxxx</p>
        </li>
        <li>
            <img src="../qiu.jpg" alt="">
            <p><a href="#">精选标题精选标题精选标题</a></p>
            <p>用户：xxxxx</p>
            <p>用户：xxxxx</p>
            <p>用户：xxxxx</p>
        </li>
        <li>
            <img src="../qiu.jpg" alt="">
            <p><a href="#">精选标题精选标题精选标题</a></p>
            <p>用户：xxxxx</p>
            <p>用户：xxxxx</p>
            <p>用户：xxxxx</p>
        </li>
        <li>
            <img src="../qiu.jpg" alt="">
            <p><a href="#">精选标题精选标题精选标题</a></p>
            <p>用户：xxxxx</p>
            <p>用户：xxxxx</p>
            <p>用户：xxxxx</p>
        </li>
        <li>
            <img src="../qiu.jpg" alt="">
            <p><a href="#">精选标题精选标题精选标题</a></p>
            <p>用户：xxxxx</p>
            <p>用户：xxxxx</p>
            <p>用户：xxxxx</p>
        </li>
        <li>
            <img src="../qiu.jpg" alt="">
            <p><a href="#">精选标题精选标题精选标题</a></p>
            <p>用户：xxxxx</p>
            <p>用户：xxxxx</p>
            <p>用户：xxxxx</p>
        </li>
        <li>
            <img src="../qiu.jpg" alt="">
            <p><a href="#">精选标题精选标题精选标题</a></p>
            <p>用户：xxxxx</p>
            <p>用户：xxxxx</p>
            <p>用户：xxxxx</p>
        </li>
        <li>
            <img src="../qiu.jpg" alt="">
            <p><a href="#">精选标题精选标题精选标题</a></p>
            <p>用户：xxxxx</p>
            <p>用户：xxxxx</p>
            <p>用户：xxxxx</p>
        </li>
    </ul>
</div>
</body>
</html>